<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<div class="definewidth">
    <!--<button type="button" class="btn btn-success top-back" id="backbtn">返回</button>-->
    <div class="div-echart ">
        <div id="main" style="width: 60%;height:400px;" class="center-block">
        </div>
    </div>

</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>

<script type="text/javascript">
    var projectCode = getQueryString('projectCode');
    var projectName = getQueryString('projectName');
    var totalAmount = formatMoney(getQueryString('totalAmount'));
    var salMonth = getQueryString('salMonth');
    var xData = [];
    var yData = [];
    var yLength = null;

    $.ajax({
        type: "POST",
        url: ctx + "/projectTotalCost/selectByProjectCode",
        data:{
            projectCode: projectCode
        },
        success: function(data){
            if(data.code == 200){
                var data = data.data;
                for(var i in data){
                    xData.push(data[i].salMonth);
                    yData.push(data[i].totalAmount);
                }
                yLength = yData.length;

                console.log(data);
                console.log(xData);
                console.log(yData);
                setEchart('main')
            } else {
                alert(data.msg)
            }
        }
    });

    var setEchart = function (eleId) {
        var myChart = echarts.init(document.getElementById(eleId));
        var option = {
            title: {
                text: projectName+'\n项目总成本变化趋势图',
                subtext:'截止月份：'+salMonth+'    项目总成本：'+totalAmount,
                x:'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap: false,
                    data : xData
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:projectName,
                    type:'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {normal: {}},
                    data:yData
                }
            ]
        };


        myChart.setOption(option);
        myChart.on('click', function (params) {
            console.log(params);
        });
    }

    $("#backbtn").click(function () {
        window.location.href = "list.html";
    });
</script>
</body>
</html>